import { App } from "../../application";
import DomUtils from "../../utils/DomUtils";


class WidgetContainer {
    private app: App;
    /**
     * 引擎内置的UI DOM对象列表
     */
    // public children = [];
    /**
     * 存放button的div
     */
    public buttonWidget: HTMLElement;
    private ready = false;
    constructor() {
        this.app = App.getInstance();
        this.initCSS();
        this.initWidget();
        this.ready = true;
    }

    /**
     * 初始化CSS
     */
    private initCSS() {
        //添加button样式
        var style = document.createElement("style");
        style.type = "text/css";
        style.innerHTML = `.ge-button {
            outline: none;
            border: 0;
            display: block;
            margin: 5px 5px 0;
            cursor: pointer;
            width: 117px;
            height: 41px;
            box-sizing: border-box;
            border: 1px solid #14171c;
            background: linear-gradient(0deg, #1e202a, #0d1013);
            box-shadow: inset 0 0 0 1px #575757, 0 2px 21px 0 rgba(33, 34, 39, .55);
            opacity: .96;
            border-radius: 2px;
            color: #fff;
            position: relative;
        };`
        document.head.appendChild(style)
    }

    public setCustomCSS({ className = 'ge-button', isShow = true, callBack }: any) {
		//添加button样式
		const style = document.createElement('style');
		style.innerHTML = `
      .${className} {
        display:${isShow ? '' : 'none'};
        ${callBack && callBack()}
      };`;
		document.head.appendChild(style);
	}

    /**
     * 初始化容器
     */
    private initWidget() {
        let container = this.app.three.domElement.parentElement;
        this.buttonWidget = DomUtils.create('div');
        this.buttonWidget.style.cssText = "position: absolute; top: 0px;z-index: 10;";
        container.appendChild(this.buttonWidget);
    }

    /**
     * 向场景中添加UI组件
     * @param element UI组件
     * @returns 
     */
    public add(element, className?: string) {
        if (this.ready) {
            element.loadToDom(className);
            // this.children.push(element);
            return;
        }

        console.warn('UI组件未初始化完毕，对象添加失败！！！');
    }

    public remove(element) {
        if (this.ready) {
            // this.buttonWidget.removeChild(element.dom);
            element.dispose();
            return;
        }
        console.warn('UI组件未初始化完毕，对象添加失败！！！');
    }
}
export { WidgetContainer }